$(function() {
    // 1. 选择需要裁剪的图片
    const $image = $(".upload-image")
    const options = {
        aspectRatio: 1, // 设置裁剪比例
        preview: '.pre1, .pre2'
    }
    // 2. 创建裁剪对象 进行裁剪
    $image.cropper(options)

    // 选择文件 弹窗
    $('#select-file').on("click", function() {
        // 触发文件选择框的点击事件
        $('#file').click()
    })

    // 监听文件选择  设置预览图
    $('#file').on('change', function() {
        // 如何去设置预览图？
        // 1. 获取选择的文件
        const file = this.files[0]
        // 2. 将文件转为 Blob类型 URL地址
        const url = window.URL.createObjectURL(file)
        // 3. 显示在图片中
        $image
            .cropper('destroy') // 销毁裁剪
            .attr('src', url) // 设置图片地址
            .cropper(options) // 重新设置裁剪
    })

    // 点击上传头像
    $('#upload-file').on('click', function() {
        // 1. 判断是否选择了文件
        if ($('#file')[0].files.length <= 0) {
            return layui.layer.msg('请选择文件!!!')
        }
        // 2. 获取裁剪后的文件
        const BASE_64 = $image.cropper('getCroppedCanvas', {
            width: 100,
            height: 100
        }).toDataURL('image/png')
        // 3. 上传到服务器中
        $.post('/my/update/avatar', {
            avatar: BASE_64
        }).then(res => {
            if (res.status !== 1) {
                return layui.layer.msg('更新失败')
            }
            // 1. 提示
            layui.layer.msg('更新成功')
            // 2. 更新用户信息  子级窗口 调用 父级窗口的方法
            parent.initUserInfo()
        })
    })
})